<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>HDCMS建站利器 | 100%免费</title>
	<script src="http://www.hdweixin.com/public/js/jquery.min.js"></script>
    <script src="http://www.hdweixin.com/public/js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/css/common.css">
    
	<!-- bootstrap -->
	<link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/bootstrap/bootstrap.min.css" />
	
	<!-- RTL support - for demo only -->
	<script src="http://www.hdweixin.com/public/centaurus/js/demo-rtl.js"></script>
	
	<!-- libraries -->
	<link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/nanoscroller.css" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/compiled/theme_styles.css" />

	<!-- this page specific styles -->
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/libs/fullcalendar.css" type="text/css" />
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/libs/fullcalendar.print.css" type="text/css" media="print" />
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/compiled/calendar.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/libs/morris.css" type="text/css" />
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/libs/daterangepicker.css" type="text/css" />
	<link rel="stylesheet" href="http://www.hdweixin.com/public/centaurus/css/libs/jquery-jvectormap-1.2.2.css" type="text/css" />
	
	<!-- this page specific styles -->
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-default.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-style-growl.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-style-bar.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-style-attached.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-style-other.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hdweixin.com/public/centaurus/css/libs/ns-style-theme.css"/>

	<!--[if lt IE 9]>
		<script src="http://www.hdweixin.com/public/centaurus/js/html5shiv.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="theme-whbl pace-done">

<ol class="breadcrumb">
	<li>
		<span class="glyphicon glyphicon-home"></span>
		<a href="<?php echo U('Cms/Index/welcome')?>">首页</a>
	</li>
	<li>自定义按钮</li>
</ol>
<div id="page-wrapper">
	<div class="row">
		<div class="col-lg-12">
			<div class="alert alert-success" style="border:solid 1px #27ae60;">
				<strong>注意!</strong>
				随意修改菜单将影响后台功能<br/>
				随意修改菜单将影响后台功能
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<div class="main-box clearfix">
				<div class="main-box-body clearfix">
					<div class="table-responsive">
						<table class="table">
	                      <thead>
	                        <tr>
	                          <th class="col-xs-1"><span>排序</span></th>
	                          <th class="col-xs-3"><div  class="col-xs-12">菜单</div></th>
	                          <th class="col-xs-7"><div  class="col-xs-12">关键词/链接</div></th>
	                          <th class="col-xs-1"><span>操作</span></th>
	                        </tr>
	                      </thead>
	                      <tbody>
	                      <?php foreach ($menu as $k=>$value){?>

	                        <tr id="<?php echo $value['id']?>">
	                          <td>
	                            <input type="text" onchange="return ajax_edit(this,<?php echo $value['id']?>);" class="form-control input-sm" type="text" name="sort" value="<?php echo $value['sort']?>">
	                          <td> 
	                            <div class="col-xs-9">

	                              <input onchange="return ajax_edit(this,<?php echo $value['id']?>);" class="form-control input-sm  col-xs-1" type="text" name="name" value="<?php echo $value['name']?>">
	                            </div>
	                          </td>
	                          <td>
	                            <div class="col-xs-8">
	                            <input onchange="return ajax_edit(this,<?php echo $value['id']?>);" class="form-control input-sm col-xs-3" name="content" type="text" value="<?php echo $value['content']?>">
	                            </div>                              
	                          </td>
	                          <td class="table-action">
	                            <a href="javascript:;" onclick="return ajax_del(this,<?php echo $value['id']?>);" class=""><i style="font-size: 18px" class="fa fa-trash-o"></i></a>
	                          </td>
	                        </tr>
	                        <?php 

	                        foreach ($value['son'] as $k => $v) {
	                        $str = '<tr id="' . $v['id'] . '"><td><input onchange="return ajax_edit(this,' . $v['id'] . ');" type="text" class="form-control input-sm" type="text" name="sort" value="' . $v['sort'] . '"></td><td><div class="col-xs-3"><img src="/public/admin/button/img/tree4.png" alt="">
	                            </div><div class="col-xs-9"><input onchange="return ajax_edit(this,' . $v['id'] . ');" class="form-control input-sm  col-xs-1" type="text" name="name" value="' . $v['name'] . '"></div></td><td><div class="col-xs-8"><input onchange="return ajax_edit(this,' . $v['id'] . ');" class="form-control input-sm col-xs-3" name="content" type="text" value="' . $v['content'] . '"></div></td><td class="table-action"><a href="javascript:;" onclick="return ajax_del(this,' . $v['id'] . ');" class=""><i style="font-size: 18px" class="fa fa-trash-o"></i></a></td></tr>';
	                        echo $str;
	                        }

	                         ?>
	                         <?php 

	                          if (count($value['son'])<5) {
	                            $str2 = '<tr class="son"><td colspan="4"><div class="col-xs-1"><img style="margin-top:-10px;" src="/public/admin/button/img/tree5.png" alt=""></div><div class="col-xs-11"><div style="background:white;" ><span class="fa fa-plus-square"></span>&nbsp;<a href="javascript:;" onclick="return ajax_add_pid(' . $value['id'] . ');"  data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加子菜单</a></div></div></td></tr>';
	                            echo $str2;
	                          }

	                         ?>
	                        <?php }?>
	                        <?php 
	                          if (count($menu)<3) {
	                            $string = '<tr class="father"><td colspan="4"><span class="fa fa-plus-square"></span>&nbsp;<a href="" onclick="return ajax_add_pid("0");" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加主菜单</a></td></tr>';
	                            echo $string;
	                          }
	                         ?>
	                        
	                        <tr class="push">
	                          <td colspan="4">
	                            <a href="javascript:;" onclick="return ajax_push();" class="col-xs-2 btn btn btn-primary">生成</a>
	                            <a href="javascript:;" onclick="return ajax_revoke();" style="margin-left:20px;" class="col-xs-2 btn btn-default">撤销</a>
	                          </td>
	                        </tr>
	                      </tbody>
	                    </table>
	                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	                        <div class="modal-dialog" role="document">
	                          <div class="modal-content">
	                            <div class="modal-header">
	                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	                              <h4 class="modal-title" id="exampleModalLabel">增加菜单</h4>
	                            </div>
	                            <div class="modal-body">
	                              <form id="addall" action="admin/menu/store" method="POST">
	                                <div class="form-group">
	                                  <label for="recipient-name" class="control-label">菜单名称:</label>
	                                  <input type="text" name="menuname" class="form-control" id="recipient-name">
	                                </div>
					              <div class="row">
					              <div class="tabs-wrapper">
					                <ul class="nav nav-tabs">
					                  <li class="active"><a href="#tuwen" data-toggle="tab">图文</a></li>
					                  <li class=""><a href="#tupian" data-toggle="tab">图片</a></li>
					                  <li class=""><a href="#wenzi" data-toggle="tab">文字</a></li>
					                  <li class=""><a href="#link" data-toggle="tab">链接</a></li>
					                </ul>
					                
					                <div class="tab-content">
					                  <div class="tab-pane fade active in" id="tuwen">
					                    <input name="imgword" value="" type="file">
					                  </div>
					                  <div class="tab-pane fade" id="tupian">
					                    <input name="img" value="" type="file">
					                  </div>
					                  <div class="tab-pane fade" id="wenzi">
					                    <input onchange="return set_hidden(this,2);" checked='checked' value="" type="text" class="form-control">
					                  </div>
					                  <div class="tab-pane fade" id="link">
					                    <input onchange="return set_hidden(this,1);" value="" type="text" class="form-control">
					                    <input type="hidden" name="type" value="">
					                    <input type="hidden" name="hiddencontent" value="">
					                    <input type="hidden" name="pid" id="hidepid" value="" >
					                  </div>
					                </div>
					              </div>
					            </div>
	                              </form>
	                            </div>
	                            <div class="modal-footer">
	                                <div class="col-xs-1">
	                              <button onclick="return ajax_add();" type="button" class="btn btn-primary">添加</button>
	                              </div>
	                              <div class="col-xs-2">
	                              <button id="close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                              </div>
	                            </div>
	                          </div>
	                        </div>
                        </div><!-- exampleModal -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

		<script src="http://www.hdweixin.com/public/centaurus/js/demo-skin-changer.js"></script> <!-- only for demo -->

		<script src="http://www.hdweixin.com/public/centaurus/js/jquery.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/bootstrap.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery.nanoscroller.min.js"></script>

		<script src="http://www.hdweixin.com/public/centaurus/js/demo.js"></script> <!-- only for demo -->

		<!-- this page specific scripts -->
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery-ui.custom.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/fullcalendar.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery.slimscroll.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/raphael-min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/morris.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/moment.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/daterangepicker.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery-jvectormap-1.2.2.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery-jvectormap-world-merc-en.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/gdp-data.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.pie.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.stack.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.resize.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.time.min.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/flot/jquery.flot.threshold.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/jquery.countTo.js"></script>

		<!-- theme scripts -->
		<script src="http://www.hdweixin.com/public/centaurus/js/scripts.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/pace.min.js"></script>

		<!--提示窗口Start-->
		<script src="http://www.hdweixin.com/public/centaurus/js/modernizr.custom.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/classie.js"></script>
		<script src="http://www.hdweixin.com/public/centaurus/js/notificationFx.js"></script>
		<!--提示窗口End-->

		<style type="text/css">
			/*表格菜单不隐藏*/
			.table-responsive{
				overflow-x: visible;
			}
			div#page-wrapper{
				min-height: 800px;
			}
		</style>
	</body>
	</html>
<script>
	//删除
  function ajax_del(_this,id){
      //把id传给php
      var td = $(_this).parent().parent('tr');
      $.ajax({
        url: '/wx/menu/' + id,
        type:'DELETE',
        cache: false,
        success: function(data){
          //如果返回的是1，则说明该菜单下没有子菜单,可以直接删除
  	// alert(data.status);
          if(data.status){
            dialog(data.content, 'success', 1000);
		    //判断添加子菜单是否存在，且删除的是否为顶级分类，若是，则需remove添加子菜单此行
		    if(data.pid == 0){
			    td.next('tr').remove();
			    //判断增加主菜单是否存在，若不存在，则需要显示
			    if(!$(".father").html()){
			    	$(".push").before('<tr class="father"><td colspan="4"><span class="fa fa-plus-square"></span>&nbsp;<a href="" onclick="return ajax_add_pid("0");" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加主菜单</a></td></tr>');
			    }
		    }
		    td.remove();
			//判断data.lastid是否存在，若存在，则表示需要增加‘增加子菜单’这一行
			if(data.lastid){
				$("#" + data.lastid).after('<tr class="son"><td colspan="4"><div class="col-xs-1"><img style="margin-top:-10px;" src="/public/admin/button/img/tree5.png" alt=""></div><div class="col-xs-11"><div style="background:white;" ><span class="fa fa-plus-square"></span>&nbsp;<a href="javascript:;" onclick="return ajax_add_pid(' + data.pid + ');"  data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">添加子菜单</a></div></div></td></tr>');
			}
          }else{
            //否则，则提示是否把主菜单下的子菜单全部删除
              // if(confirm(data.content)){
                //若确定要全部删除，则找出所有的子菜单并删除
                $.ajax({
                  // url: '?m=wx&c=menu&a=delAll',
                  url: "<?php echo U('Wx/Menu/delAll')?>",
                  type: 'POST',
                  data: {'id': id},
                  success:function(data){
                    // location.href = '/admin/menu/create';
                    if(data.status){
		            	dialog(data.content, 'success', 1000, function () {
					    window.location.reload(true);
						});
		          	}
                  }
                })
              // }
          }
        }
      });
  }

  //新增菜单，通过隐藏域的hidepid来判断是新增主菜单还是新增子菜单
  function ajax_add(){
      //菜单名称
      var m = $("#addall input[name='menuname']").val();
      //图文、图片、文字、链接
      var t = $("#addall input[name='type']").val();
      //图文、图片、文字、链接的值
      var v = $("#addall input[name='hiddencontent']").val();
      //pid
      var p = $("#hidepid").val();
      $.ajax({
          url: '/wx/menu',
          type:'POST',
          //直接把form表单的所有内容传到php（包括隐藏域的hidepid）
          data: {'name':m,'type':t,'content':v,'pid':p},
          success: function(data){
            if(data.status){
            	$("#close").click();
            	dialog(data.content, 'success', 1000, function () {
			    	window.location.reload(true);
				});
          	}else{
                dialog(data.content, 'success', 1000);
            }
          }
      });
  }
  //修改菜单，通过_this以及传参的id，判断要修改的到底是哪条菜单的数据
  function ajax_edit(_this,id){
    var name = $(_this).attr('name');
    var val = $(_this).val();
    var id = id;
    $.ajax({
          url: '/wx/menu/' + id,
          type:'PUT',
          cache: false,
          data: {'id':id,'name':name,'val':val},
          success: function(data){
            dialog(data.content, 'success', 1000);
          }
      });
  }


  //点击添加子菜单或者主菜单时，把父级的id传给隐藏域，用于添加子级菜单时的pid
  function ajax_add_pid(pid){
    $("#hidepid").val(pid);
  }

  // 用于图文，图片，文字或者链接这四种状况的值传递到隐藏域，在php端好判断到底哪个才是最后接收到的要写入数据库的值
  function set_hidden(_this,id){
    var v = $(_this).val();
    $("#addall input[name='type']").val(id);
    $("#addall input[name='hiddencontent']").val(v);
  }

  //ajax生成
  function ajax_push(){
  	$.ajax({
  		url: "<?php echo U('Wx/Menu/push')?>",
  		type: 'POST',
  		dataType: 'JSON',
  		success: function()
  		{
  			dialog(data.content, 'success', 1000);
  		}
  	})
  }

  //ajax撤销
  function ajax_revoke(){
  	$.ajax({
  		url: "<?php echo U('Wx/Menu/revoke')?>",
  		type: 'POST',
  		dataType: 'JSON',
  		success: function()
  		{
  			dialog(data.content, 'success', 1000);
  		}
  	})
  }
</script>